<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>UI Options Preview Content</title>
        <link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-reset.css" />
        <link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-layout.css" />
        <link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-text.css" />
        <link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-theme-hc.css" />
        <link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-theme-hci.css" />
        <link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-theme-slate.css" />
        <link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-theme-coal.css" />
        <link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-theme-mist.css" />
        <link rel="stylesheet" type="text/css" href="../css/UIOptionsPreview.css" />

	</head>
	<body class="fl-uiOptions-previewContent">
        <h1>Web Pages</h1>
        <img src="../images/mintleaf.png" alt="Mint Leaf" title="This is a mint leaf" />
        <p>A <b>web page</b> or <b>webpage</b> is a <strong>resource of information</strong> that is suitable for the World Wide Web and can be accessed through a web browser. This information is usually in HTML or XHTML format, and may provide navigation to other web pages via hypertext links.</p>
        <h2>Color, typography, illustration and interaction</h2>
        <p><a href="#">Web pages</a> usually include instructions as to the colors of text and backgrounds and very often also contain links to images and sometimes other media to be included in the final view.</p>
        <h2>Elements of a webpage</h2>
        <ol>
            <li>Textual
                <ul>
                    <li><a href="#">content with a textual representaion</a></li>
                </ul>
            </li>
            <li>Non-textual
                <ul>
                    <li>Static and Animated imagery</li>
                    <li>Audio</li>
                    <li>Video</li>
                </ul>
            </li>
            <li>Interactive
                <ul>
                    <li>Forms</li>
                    <li><a href="#">Hyperlinks</a></li>
                </ul>
            </li>
            <li>Hidden</li>
        </ol>
        <h3>Breakdown of webpage markup</h3>
        <table>
            <thead>
                <tr>
                    <th>Tag</th>
                    <th>Meaning</th>
                    <th>Deprecated</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><pre>&lt;B&gt;</pre></td>
                    <td>Make an element as BOLD</td>
                    <td><input type="checkbox" checked="checked" disabled="disabled" /></td>
                </tr>
                <tr>
                    <td><pre>&lt;I&gt;</pre></td>
                    <td>Show an element in ITALICS</td>
                    <td><input type="checkbox" checked="checked" /></td>
                </tr>
                <tr>
                    <td><pre>&lt;EM&gt;</pre></td>
                    <td>EMPHASIZE an element</td>
                    <td><input type="checkbox" disabled="disabled" /></td>
                </tr>
                <tr>
                    <td><pre>&lt;STRONG&gt;</pre></td>
                    <td>Use STRONG EMPHASIS for an element</td>
                    <td><input type="checkbox" /></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th>Tag</th>
                    <th>Meaning</th>
                    <th>Deprecated</th>
                </tr>
            </tfoot>
        </table>
	</body>
</html>
